import React, { Component } from 'react'
// import logo from './logo.svg'
// import './App.css'
// 回顾项目
import User from './compontent/User'
let numbers = [1, 2, 3, 4]
class App extends Component {
  constructor(props) {
    super(props)
    this.state = { value: '' }
  }
  handleChange = event => {
    this.setState({ value: event.target.value })
  }

  handleSubmit = event => {
    alert('A name was submitted: ' + this.state.value)
    event.preventDefault()
  }
  activateLasers = () => {
    this.textInput.sonMethods()
  }
  render() {
    return (
      <div>
        <div onClick={this.activateLasers}>点击改变字体颜色</div>
        <User
          name={'我来了'}
          ref={input => {
            this.textInput = input
          }}
        />
        {numbers.map(number => <li key={number.toString()}>{number}</li>)}
        <div>{this.state.value}</div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}

export default App
